<template>
  <div class="content">
    <div class="content-bg"></div>
    <div class="main-block">
      <h1>{{ route.query.centreName }}</h1>
      <div class="main-list">
        <div class="main-list-first">
          <p class="first-info">
            {{ detailsData.topDescribe }}
          </p>
          <span class="first-title"></span>
        </div>
        <!-- <div
          class="main-list-first first-padding"
          v-if="detailsData.cityInfoModels && detailsData.cityInfoModels[0].describe"
        >
          <img src="@/assets/images/shanghai-bg.png" alt="" width="190" height="110" />
          <div class="list-second">
            <h2>上海</h2>
            <p>{{ detailsData.cityInfoModels && detailsData.cityInfoModels[0].describe }}</p>
          </div>
        </div>
        <div
          class="main-list-first first-padding"
          v-if="detailsData.cityInfoModels && detailsData.cityInfoModels[1].describe"
        >
          <div class="list-second">
            <h2>江苏</h2>
            <p>{{ detailsData.cityInfoModels && detailsData.cityInfoModels[1].describe }}</p>
          </div>
          <img src="@/assets/images/jiangsu-bg.png" alt="" width="190" height="110" />
        </div>
        <div
          class="main-list-first first-padding"
          v-if="detailsData.cityInfoModels && detailsData.cityInfoModels[2].describe"
        >
          <img src="@/assets/images/zhejiang-bg.png" alt="" width="190" height="110" />
          <div class="list-second">
            <h2>浙江</h2>
            <p>{{ detailsData.cityInfoModels && detailsData.cityInfoModels[2].describe }}</p>
          </div>
        </div>
        <div
          class="main-list-first first-padding"
          v-if="detailsData.cityInfoModels && detailsData.cityInfoModels[3].describe"
        >
          <div class="list-second">
            <h2>安徽</h2>
            <p>{{ detailsData.cityInfoModels && detailsData.cityInfoModels[3].describe }}</p>
          </div>
          <img src="@/assets/images/anhui-bg.png" alt="" width="190" height="110" />
        </div> -->
        <div
          class="main-list-first first-padding"
          v-for="(item, index) in detailsData.cityInfoModels || []"
          :key="index"
        >
          <template v-if="index % 2 === 0">
            <img :src="item.pic" alt="" width="190" height="110" />
            <div class="list-second">
              <h2>{{
                areaDictCodes.find((d) => d.dictionaryCode === item.title)?.dictionaryName ||
                item.title
              }}</h2>
              <p>{{ item.describe }}</p>
            </div>
          </template>
          <template v-else>
            <div class="list-second">
              <h2>{{
                areaDictCodes.find((d) => d.dictionaryCode === item.title)?.dictionaryName ||
                item.title
              }}</h2>
              <p>{{ item.describe }}</p>
            </div>
            <img :src="item.pic" alt="" width="190" height="110" />
          </template>
        </div>
      </div>
      <template v-if="detailsData.layoutInfoModels && detailsData.layoutInfoModels.length">
        <div class="part-title">
          <span>产业布局</span>
          <i></i>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-left">
              <div
                class="info-select"
                :class="leftTabAcitve === index ? 'info-select-item-color' : ''"
                v-for="(item, index) in detailsData.layoutInfoModels"
                :key="index"
                @click="changeTab(item, index)"
              >
                <div class="info-select-item">
                  <div class="info-select-item-title">
                    <i class="select-icon" :class="`select-icon${index + 1}`"></i>
                    <span>{{ item.title }}</span>
                  </div>
                  <div>
                    <div
                      class="select-item-tags"
                      v-for="(item2, index2) in item.title2"
                      :key="index2"
                    >
                      <span>{{ item2 }}</span>
                      <el-divider direction="vertical" v-if="index2 !== item.children.length - 1" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">
              <div class="info-select" v-for="(item, index) in jcServiceDesc" :key="index">
                <div class="info-select-item info-select-item-right">
                  <div>
                    <span>{{ item.title }}</span>
                  </div>
                  <div>
                    <div
                      class="select-item-tags"
                      v-for="(item2, index2) in item.title2"
                      :key="index2"
                    >
                      <span @click="openView(item2)">{{ item2.title }}</span>
                      <el-divider direction="vertical" v-if="index2 !== item.title2.length - 1" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
      <template v-if="detailsData.introduce">
        <div class="part-title">
          <span>产品中心介绍</span>
          <i></i>
        </div>
        <div class="introduce">
          {{ detailsData.introduce }}
        </div>
      </template>
      <template
        v-if="detailsData.centerMemberInfoModels && detailsData.centerMemberInfoModels.length"
      >
        <div class="part-title">
          <span>产业中心成员</span>
          <i></i>
        </div>
        <div class="industry-member">
          <div
            class="industry-member-item"
            @click="openView(item)"
            v-for="(item, index) in detailsData.centerMemberInfoModels"
            :key="index"
          >
            <el-image :src="item.pic" fit="fill" style="width:140px;height:110px"></el-image>
            <span class="member-item-name">{{ item.title }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  detailsData: {
    type: Object,
    default: {}
  }
})
const route = useRoute()
const leftTabAcitve = ref(0)

const dictStore = useDictStore()
dictStore.fetchDictionary()
const areaDictCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_AREA_CODE')
})

const jcServiceDesc = ref([])
watchEffect(() => {
  if (props.detailsData.layoutInfoModels) {
    jcServiceDesc.value = props.detailsData.layoutInfoModels[0].children
  }
})
function changeTab(val, index) {
  leftTabAcitve.value = index
  jcServiceDesc.value = val.children
}
function openView(val) {
  window.open(val.link, '_blank')
}
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  // min-height: 2550px;
}

.content-bg {
  width: 100%;
  height: 240px;
  background: url('@/assets/images/capacity-bg.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

.main-block {
  padding-top: 100px;
  margin: 0 auto;
  width: 1200px;
  z-index: 10;
  position: relative;

  h1 {
    font-weight: 600;
    font-size: 24px;
    color: #ffffff;
    line-height: 28px;
    text-align: center;
    margin: 20px auto;
  }

  h2 {
    font-size: 16px;
    color: #333333;
    margin: 0px auto 10px;
  }

  p {
    font-size: 14px;
    color: #8992a9;
  }

  .main-list {
    background-color: #fff;

    .main-list-first {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 160px;
      border-bottom: 1px solid #ebedf0;

      .first-info {
        padding: 0 20px;
        width: 80%;
        //缩进文本
        text-indent: 2em;
        line-height: normal;
        //文本超出显示...
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
      }

      .first-title {
        width: 20%;
        height: 100%;
        background: url('@/assets/images/info-item-bg.png') no-repeat;
        background-size: 100% 100%;
      }

      .list-second {
        padding: 10px 20px;
        flex: 1;
        p {
          overflow: hidden;
          line-height: normal;
          width: 100%;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
        }
      }
    }

    .first-padding {
      padding: 0 20px;
    }
  }

  .part-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 20px 0;

    span {
      display: block;
      width: 100%;
      margin-bottom: 5px;
      font-weight: 800;
      font-size: 18px;
      text-align: center;
      letter-spacing: 6px;
      color: #333333;
    }

    i {
      display: block;
      width: 34px;
      height: 5px;
      background-color: #1d5ede;
    }
  }

  .info-select-item-color {
    background-color: #1d5ede;
  }

  .info-select-item-right {
    // line-height: 10px !important;
    border: none !important;
  }

  .info-select-item {
    width: auto;
    // height: 100px;
    padding: 20px;
    border-bottom: 1px solid #fff;

    .info-select-item-title {
      display: flex;
      align-items: center;
    }

    .select-icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }

    .select-icon1 {
      background: url('@/assets/images/icon/icon1.png') no-repeat;
      background-size: 100% 100%;
    }

    .select-icon2 {
      background: url('@/assets/images/icon/icon2.png') no-repeat;
      background-size: 100% 100%;
    }

    .select-icon3 {
      background: url('@/assets/images/icon/icon3.png') no-repeat;
      background-size: 100% 100%;
    }

    .select-icon4 {
      background: url('@/assets/images/icon/icon4.png') no-repeat;
      background-size: 100% 100%;
    }

    .select-icon5 {
      background: url('@/assets/images/icon/icon5.png') no-repeat;
      background-size: 100% 100%;
    }

    .select-item-tags {
      display: inline-block;
      font-size: 12px;
      margin: 10px 0 0 10px;
    }
  }

  .info-left {
    background: linear-gradient(181deg, #002773 0%, #5100a1 100%);
  }

  .info-select {
    color: #fff;
    cursor: pointer;
  }

  .info-value {
    width: 100%;
    height: 100%;
    background: url('@/assets/images/part-right-bg.png') no-repeat;
    background-size: 100% 100%;
  }

  .introduce {
    padding: 20px;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.8;
    color: #8992a9;
  }

  .industry-member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .industry-member-item {
      width: 180px;
      height: 180px;
      margin-right: 20px;
      margin-bottom: 20px;
      padding: 20px;
      background-color: #fff;
      text-align: center;
      cursor: pointer;

      .member-item-name {
        margin-top: 5px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
